<template>
  <div id="app">
    <!--<transition :name="transitionName"
                :enter-active-class="'transition-active'"
                :leave-active-class="'transition-active'">-->
      <router-view :bus="bus"></router-view>
    <!--</transition>-->
    <UrgentMsg :bus="bus"></UrgentMsg>
  </div>
</template>

<script>
  import UrgentMsg from './components/UrgentMsg'
  export default {
    props: ['bus'],
    // data () {
    //   return {
    //     transitionName: ''
    //   }
    // },
    // watch: {
    //   '$route' (to, from) {
    //     let toPath = to.path
    //     let fromPath = from.path
    //     toPath = toPath.trim().replace(/\/$/, '').replace(/\/+/, '/')
    //     fromPath = fromPath.trim().replace(/\/$/, '').replace(/\/+/, '/')
    //     if (from.name) {
    //       let toDepth = toPath.split('/').length
    //       let fromDepth = fromPath.split('/').length
    //       if (toDepth === fromDepth) {
    //         toDepth = to.meta.zIndex
    //         fromDepth = from.meta.zIndex
    //       }
    //       this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    //     }
    //   }
    // },
    components: {
      UrgentMsg
    }
  }
</script>

<!--<style scoped>
  .transition-active{
    position: absolute;
    top: 0;

    left: 50%;
    margin-left: -540px;
  }
</style>-->
